<template>
  <div class="body-box">
    <template v-if="shows">
      <el-row class="btn-box" style="text-align: right;margin-right: 120px">
        <!-- <el-button type="primary" icon="el-icon-plus" @click="addHandle"
          >添加</el-button
        > -->
        <el-button type="primary" icon="el-icon-delete" @click="deleteHandle">删除</el-button>
        <el-button type="primary" icon="el-icon-refresh-left" @click="close">返回列表</el-button>
        <el-button type="primary" icon="el-icon-printer" @click="printHandle">批量打印</el-button>
      </el-row>
      <div class="table-box">
        <el-table v-loading="tableLoading" :data="tableData" border style="width: 90%;margin:0 auto"
          :header-cell-style="{ background: '#f5f7fa' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="产品名称" align="center" prop="name" />
          <el-table-column label="产品编号" align="center" prop="cardInfo.productNum" />
          <el-table-column label="焊接工艺编号" align="center" prop="craftsSerialNumber">
            <!-- <template slot-scope="scope">
              <span v-if="craftsInfoList || scope.row.craftsSerialNumber">{{
                craftsInfoList.find(
                  (item) => item.id == scope.row.craftsSerialNumber
                )
              }}</span>
            </template> -->
          </el-table-column>
          <el-table-column label="焊口编号" align="center" prop="weldNum" />
          <el-table-column label="焊接方法" align="center">
            <template v-if="scope.row.weldingMethodList" slot-scope="scope">{{
              scope.row.weldingMethodList.map((item) => item.name).join("+")
            }}</template>
          </el-table-column>
          <el-table-column label="测温方法" align="center">
            <template v-if="scope.row.cwMethodList" slot-scope="scope">{{
              scope.row.cwMethodList.map((item) => item.name).join("+")
            }}</template>
          </el-table-column>
          <el-table-column label="预热方法" align="center">
            <template v-if="scope.row.preheatingMethodList" slot-scope="scope">{{
              scope.row.preheatingMethodList
                .map((item) => item.name)
                .join("+")
            }}</template>
          </el-table-column>
          <el-table-column label="预热范围" align="center" prop="preheatingScope" />
          <el-table-column label="记录日期" align="center" prop="date">
            <template slot-scope="scope">
              <span>{{ scope.row.date | dateFormat("YYYY-MM-DD") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检测人" align="center" prop="inspector" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewHandle(scope.row)">查看</el-button>
              <!-- <el-button type="text" @click="editHandle(scope.row)" size="small"
                >编辑</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template v-else>
      <welds :id="id" :weld-data="weldData" :view-show="viewShow" :add="add" :card-ids="cardIds" @closepop="closepop"
        @closeshow="closeshow" />
    </template>
    <el-dialog title="打印" :visible.sync="drawer" width="70%">
      <div id="printMeD">
        <div v-for="id in ids" :key="id" style="margin: 100px 0">
          <welds-view :id="id" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="drawer = false">关闭</el-button>
        <el-button v-print="{
            id: 'printMeD',
            popTitle: ''
          }" type="primary">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    postHandle
  } from '@/api'
  import welds from './welds.vue'
  import WeldsView from '@/pages/project/views/weld/weldsView'
  export default {
    components: {
      WeldsView,
      welds
    },
    props: {
      cardId: {
        typeof: String,
        default: ''
      }
      // craftsId:{
      //   typeof:String,
      //   default:''
      // }
    },
    data() {
      return {
        cardIds: '',
        id: '',
        shows: true,
        viewShow: false,
        tableData: [],
        tableLoading: true,
        weldData: {},
        add: 0,
        craftsInfoList: [],
        ids: [],
        drawer: false
      }
    },
    watch: {
      craftsId(value) {
        this.craftsIds = value
      }
    },
    created() {
      this.getData()
      if (this.cardId) {
        this.cardIds = this.cardId
      }
    },
    methods: {
      async getData() {
        const req = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        const params = {
          d: {
            filters: [{
                field: 'spaceId',
                operator: 'EQUALS',
                value: this.spaceId
              },
              {
                field: 'cardId',
                operator: 'EQUALS',
                value: this.cardId
              },
              {
                field: 'st',
                operator: 'NE',
                value: 9
              }
            ],
            retOnlySt: false,
            page: {
              p: 1,
              ps: 10
            }
          }
        }
        postHandle(
          '/api/v1/welder-sbtx-second/welds-record-basic-info-comb/list',
          params
        ).then((res) => {
          this.tableLoading = false
          this.tableData = res.result
        })
        postHandle('/api/v1/welder-sbtx-second/crafts-info-comb/list', req).then(
          (res) => {
            this.craftsInfoList = res.result
          }
        )
      },
      viewHandle(viewvalue) {
        this.shows = false
        this.viewShow = true
        postHandle(
            '/api/v1/welder-sbtx-second/welds-record-basic-info-comb/show/' + viewvalue.id
          )
          .then((res) => {
            this.weldData = res.result
           
          })
          .catch((res) => {
            console.log(res)
          })
      },
      // editHandle(editvalue) {
      //   this.shows = false;
      //   this.id = editvalue.id;
      //   this.viewHandle(editvalue);
      //   this.viewShow = false;
      // },
      // addHandle() {
      //   this.shows = false;
      //   this.viewShow = false;
      //   this.add = 2;
      // },
      closepop() {
        this.shows = !this.shows
      },
      closeshow() {
        this.shows = !this.shows
        this.getData()
      },
      handleSelectionChange(value) {
        this.ids = value.map((item) => item.id)
      },
      close() {
        this.$emit('closepop')
      },
      deleteHandle() {
        if (!(this.ids && this.ids.length > 0)) {
          this.$message.error('请选择要删除的数据')
          return false
        }
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            const params = {
              d: {
                filters: [{
                  field: 'st',
                  operator: 'NE',
                  value: 9
                }],
                page: {
                  p: 1,
                  ps: 10
                },
                retOnlySt: false
              },
              obj: {
                ids: this.ids
              }
            }
            postHandle(
                '/api/v1/welder-sbtx-second/welds-record-basic-info-comb/remove-batch',
                params
              )
              .then((res) => {
                this.getData()
                this.$message.success('删除成功')
              })
              .catch((res) => {
                this.$message.error('删除失败')
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      printHandle() {
        if (this.ids && this.ids.length > 0) {
          this.drawer = true
        } else {
          this.$message.error('请选择')
        }
      }
    },
    computed: {
      ...mapGetters(['spaceId'])
    }
  }
</script>
<style lang="scss" scoped>
  .body-box {
    height: 100vh;
    overflow: hidden;

    .btn-box {
      margin-top: 50px;
      margin-left: 5%;
    }
  }

  .table-box {
    background: #ffffff;
    margin-top: 50px;
  }
</style>